import React, { Component } from 'react'
import axios from "axios"
import Procss from "../scss/Product.module.scss"
import {Toast } from 'antd-mobile';

export default class Pay extends Component {
    state = {
        good: {},
        addresslist: [{
            "uaid": 914,
            "address": "黄邓邓的心里 1号",
            "address_name": "李华华",
            "address_mobile": "99999999999"
        }],
        uoid: null
    }
    async componentDidMount() {
        let token = localStorage.getItem("MyToken")
        console.log("pay组件加载完毕");
        // 产品详情
        axios.get("http://s.linweiqin.com/api/s/getProductDetail", {
            params: {
                pid: this.props.match.params.pid
            }
        }).then(res => {
            // console.log(res.data.wdata);
            this.setState({
                good: res.data.wdata
            })
        })
        //地址列表
        var res = await axios.get("http://s.linweiqin.com/api/s/getUserAddressList", {
            params: {
                oauth_token: token
            }
        })
        if (res.data.wdata) {
            /* 深拷贝 */
            var arr = JSON.parse(JSON.stringify(res.data.wdata))
            this.setState({
                addresslist: arr
            })
        }
        //创建订单
        var res2 = await axios.get("http://s.linweiqin.com/api/s/createOrder", {
            params: {
                oauth_token: token,
                uaid: this.state.addresslist[0].uaid
            }
        })
        if (res2.data.uoid) {
            this.setState({
                uoid: res2.data.uoid
            })
        }
    }
    backTohome = () => {
        window.history.back()
    }
    /* 去支付 */
    towxPay = () => {
        let token = localStorage.getItem("MyToken")
        axios.get("http://s.linweiqin.com/api/s/wxPrepay", {
            params: {
                oauth_token: token,
                uoid: this.state.uoid
            }
        }).then(res => {
            if (res.data.payUrl) {
                window.location.href = res.data.payUrl

            } else {
                Toast.offline('请先登入再下单 !!!', 1);
            }
        })
    }
    render() {
        console.log("pay组件进入加载");

        return (
            <div className={Procss.product}>
                {/* 主页头部 */}
                <div className={Procss.ProHeader}>
                    <div className={Procss.ProHeaderLef} onClick={this.backTohome}><span className="iconfont proback">&#xe66e;</span></div>
                    <div className={Procss.ProHeaderCen}>确认订单</div>
                    <div className={Procss.ProHeaderRig}><span></span></div>
                </div>
                {/* 主体部分 */}
                <div className={Procss.ProBody}>
                    <div className={Procss.adress}>
                        <div className={Procss.adressMsg}>
                            <h4>收货人:{this.state.addresslist[0].address_name + " " + this.state.addresslist[0].address_mobile}</h4>
                            <p>{this.state.addresslist[0].address}</p>
                        </div>
                        <span>{">"}</span>
                    </div>
                    <div className={Procss.shop}>
                        <img src={this.state.good.product_url} alt="" />
                        海绵宝宝
                    </div>
                    <div className={Procss.paygoods}>
                        <div className={Procss.imgbox}>
                            <img src={this.state.good.product_url} alt="" />
                        </div>
                        <div className={Procss.paygoodMsg}>
                            <h3>{this.state.good.product_name}</h3>
                            <p>颜色：{this.state.good.product_spec}</p>
                            <span>￥{this.state.good.product_price}</span>
                        </div>
                        <div className={Procss.goodsnum}>
                            X{"1"}
                        </div>
                    </div>
                </div>
                {/* 底部 */}
                <div className={Procss.ProFoot}>
                    <div className={Procss.Payall}>合计：￥{"136.00"}</div>
                    <div className={Procss.ProBuynow} onClick={this.towxPay}>去结算</div>
                </div>

            </div>
        )
    }

}
